<template>
  <div class="login">
    <div class="container">
      <div class="login_box">
        <img src="../assets/login.png" alt="" />
      </div>
      <van-form class="login_form" ref="loginFormRef" >
        <van-field
          v-model="loginForm.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="loginFormRules.username"
        />
        <van-field
          v-model="loginForm.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
           :rules="loginFormRules.password"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="danger"
            native-type="submit"
            @click="login"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      this.$refs.loginFormRef
        .validate()
        .then(() => {
          window.sessionStorage.setItem("token", "11111111");
          this.$router.push("/index");
        })
        .catch(() => {
          return;
        });
    },
  },
};
</script>
<style  scoped>
.login {
  height: 100%;
}
.container {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
}
.login_box {
  width: 1rem;
  height: 1rem;
  background-color: #fff;
  border-radius: 5px;
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.login_form {
  margin-top: 1rem;
}
</style>